<!--
* @description 接处警回顾
* @author zywu
* @date 2021/01/05 20:11:15
!-->
<template>
  <li class="item">
    <p class="item-tt">接处警回顾</p>
    <div class="policeView">
      <p class="policeTt">
        <img
          src="/ilink-app-h5-zd/static/img/ilink_1565765076954.png"
          style="vertical-align:middle;width:25px;height:25px;"
        />警情数量变化
      </p>
      <div id="policeChart" class="policeChart"></div>
    </div>
    <div>
      <p class="policeTt">
        <img
          src="/ilink-app-h5-zd/static/img/ilink_1565765076954.png"
          style="vertical-align:middle;width:25px;height:25px;"
        />警情处理
      </p>
      <div id="policeDeil" class="policeDeil">
        <div v-for="(item,i) in dataList" :key="i" class="policeDeil-item">
          <div>
            <div v-if="item.type==10" class="policeDeil-item-tt" style="color:#FA7C5A">
              <i class="iconfont icon-APPicon_baojing"></i>报警
            </div>
            <div v-else-if="item.type==20" class="policeDeil-item-tt" style="color:#FFBC37">
              <i class="iconfont icon-APPicon_guzhang1"></i>故障
            </div>
            <div v-else-if="item.type==30" class="policeDeil-item-tt" style="color:#A5A5A5">
              <i class="iconfont icon-APPicon_pingbi"></i>屏蔽
            </div>
            <div v-else-if="item.type==40" class="policeDeil-item-tt" style="color:#357BCC">
              <i class="iconfont icon-APPicon_liandong"></i>联动
            </div>
            <div class="policeDeil-item-total">
              总数
              <span>{{item.total}}</span>
            </div>
            <div class="policeDeil-item-num">
              处理数
              <span>{{item.handleNum}}</span>
            </div>
          </div>
        </div>
        <img v-if="dataList.length==0" src="/ilink-app-h5-zd/static/img/ilink_1564368528154.png" style="width:100%;" />
      </div>
    </div>
  </li>
</template>

<script>
export default {
  props: {
    reportData: {
      type: Object,
      default: function () {
        return {}
      },
    },
    period: {
      type: [Number, String],
      default: '',
    },
    periodName: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      dataList: [],
    }
  },

  components: {},

  computed: {},

  created() {},

  mounted() {
    let data = this.reportData
    var changeOfPoliceSituation = data.changeOfPoliceSituation //接处警回顾
    if (changeOfPoliceSituation) {
      let xAxis = []
      let seriesData = []
      let prevPeriodData = []
      changeOfPoliceSituation.forEach((n, i) => {
        let date = n.time.toString().substr(4, 4)
        xAxis.push(`${Number(date.substr(0, 2))}.${Number(date.substr(2, 2))}`)
        seriesData.push(n.total)
        prevPeriodData.push(n.sheilding)
      })
      this.initPoliceChart(xAxis, seriesData, prevPeriodData)
    }
    if (data.policeHandling) {
      this.dataList = data.policeHandling.policeHandling
    }
  },

  methods: {
    getPoliceTypeHtml(type) {
      let htm = ''
      if (type == 10) {
        //类型 10报警 20故障 30屏蔽 40联动
        htm = `<div class="policeDeil-item-tt" style="color:#FA7C5A">报警</div>`
      } else if (type == 20) {
        htm = `<div class="policeDeil-item-tt" style="color:#FFBC37">故障</div>`
      } else if (type == 30) {
        htm = `<div class="policeDeil-item-tt" style="color:#A5A5A5">屏蔽</div>`
      } else if (type == 40) {
        htm = `<div class="policeDeil-item-tt" style="color:#357BCC">联动</div>`
      }
      return htm
    },
    initPoliceChart(xAxis, seriesData, prevPeriodData) {
      let myChart = echarts.init(document.getElementById('policeChart'))
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            //type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
          backgroundColor: '#fff',
          padding: 8,
          textStyle: {
            color: '#666',
            fontSize: 12,
            lineHeight: 20,
          },
          extraCssText: 'box-shadow: 0px 0px 15px 0px rgba(129,129,129,0.2);',
        },
        grid: {
          top: '10px',
          left: '4%',
          right: '4%',
          bottom: '30px',
          containLabel: false,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: xAxis,
            axisLabel: {
              show: true,
              margin: 10,
              textStyle: {
                color: '#666666',
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#f6f6f6',
              },
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            show: false,
            minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。
            axisLabel: {
              formatter: '{value}',
            },
          },
        ],
        color: ['#D0D7FF', '#82a9f8'],
        series: [
          // {
          //   name: `上${this.periodName}`,
          //   type: 'line',
          //   smooth: true,
          //   itemStyle: {
          //     normal: {
          //       //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
          //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //         {
          //           offset: 0,
          //           color: '#e5edfe', // 0% 处的颜色
          //         },
          //         {
          //           offset: 0.5,
          //           color: '#ecf2fe', // 50% 处的颜色
          //         },
          //         {
          //           offset: 1,
          //           color: '#fdfdff', // 100% 处的颜色
          //         },
          //       ]), //背景渐变色
          //       lineStyle: {
          //         // 系列级个性化折线样式
          //         width: 0,
          //         type: 'solid',
          //         color: '#D0D7FF',
          //       },
          //     },
          //     emphasis: {
          //       color: '#D0D7FF',
          //       lineStyle: {
          //         // 系列级个性化折线样式
          //         width: 0,
          //         type: 'dotted',
          //         color: '#D0D7FF', //折线的颜色
          //       },
          //     },
          //   }, //线条样式
          //   symbolSize: 0, //折线点的大小
          //   areaStyle: { normal: {} },
          //   data: prevPeriodData,
          // },
          {
            // name: `本${this.periodName}`,
            type: 'line',
            smooth: true,
            itemStyle: {
              normal: {
                lineStyle: {
                  // 系列级个性化折线样式
                  width: 2,
                  type: 'solid',
                  color: '#82a9f8',
                },
              },
              emphasis: {
                color: '#82a9f8',
                lineStyle: {
                  // 系列级个性化折线样式
                  width: 2,
                  type: 'solid',
                  color: '#82a9f8', //折线的颜色
                },
              },
            }, //线条样式
            symbolSize: 0, //折线点的大小
            data: seriesData,
          },
        ],
      }
      myChart.setOption(option, true)
    },
  },
}
</script>
<style lang='scss' scoped>
.policeDeil-item-tt {
  .iconfont {
    margin-right: 5px;
  }
}
</style>